import { Suspense } from "react";

function Loading() {
  return (
    <p className="flex items-center justify-center  w-full h-[300px] bg-[red]">
      Loading server content...
    </p>
  );
}

export default function AsyncDemo() {
  return (
    <div>
      <h1>My Page</h1>
      <Suspense fallback={<Loading />}>
        {/* 服务端组件 */}
        <ServerComponent />
      </Suspense>
    </div>
  );
}

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("This is mock data from the server!");
    }, 2000); // 模拟 2 秒的网络延迟
  });
}

async function ServerComponent() {
  const data = await fetchData(); // 模拟异步数据获取
  return <p>{data}</p>;
}
